import React from "react";
import { TouchableOpacity, Text, StyleSheet, Image, ImageSourcePropType, View } from "react-native";

interface MyAvatarProps {
  onPress: () => void;
  text: string;
  imgSrc: ImageSourcePropType
}

export const MyAvatar = ({ onPress, text, imgSrc }: MyAvatarProps) => {
  return (
    <TouchableOpacity style={styles.container} onPress={onPress}>
      <View style={{}}>
        <View style={styles.img}>
          <Image style={styles.img} source={imgSrc} />
        </View>
        <Text style={styles.text} numberOfLines={1}>{text}</Text>
      </View>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  container: {
    paddingHorizontal: 32,
    paddingVertical: 8,
    backgroundColor: "purple",
    alignSelf: "flex-start",
    borderRadius: 8,
  },
  img: {
    width: 80,
    height: 80,
    borderRadius: 40,
  },
  text: { color: "white", fontSize: 16, fontWeight: "bold", maxWidth: 80 },
});
